<template>
  <div id="app">
    <!--引入header组件 -->
    <my-header></my-header>
    <div class="tab border-1px">
      <router-link to="/recommend" class="tab-item">推荐</router-link>
      <router-link to="/singer" class="tab-item">歌手</router-link>
      <router-link to="/rank" class="tab-item">排行</router-link>
      <router-link to="/search" class="tab-item">搜索</router-link>
    </div>
    
    <!--渲染router -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>

    <!--player播放器组件,设置为全局 -->
    <player></player>
  </div>
</template>

<script>
import myHeader from '@/components/header/header.vue';
import player from '@/components/player/player.vue';

export default {
  components: {
    myHeader,
    player
  }
};
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "@/assets/style/mixin.scss";
.tab {
  display: flex;
  width: 100%;
  height: 32px;
  line-height: 32px;
  @include border-1px(rgba(7, 17, 27, 0.1));
  .tab-item {
    flex: 1;
    text-align: center;
    display: block;
    font-size: 14px;
    color: rgb(77, 85, 93);
  }
  .active {
    color:  rgb(240, 20, 20);
    border-bottom: 1px solid rgb(240, 20, 20);
    width: 20%;
  }
}
</style>
